<template>
  <div class="skeleton-wrapper" :style="{ width, height }">
    <svg :width="width" :height="height" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
      <!-- 背景 -->
      <rect width="100%" height="100%" fill="#f5f5f5" rx="2" ry="2" />

      <!-- 骨架元素 -->
      <rect x="16" y="16" width="120" height="16" rx="2" ry="2" class="skeleton-item" />
      <rect x="16" y="44" width="268" height="14" rx="2" ry="2" class="skeleton-item" />
      <rect x="16" y="68" width="240" height="14" rx="2" ry="2" class="skeleton-item" />
      <rect x="16" y="92" width="200" height="14" rx="2" ry="2" class="skeleton-item" />
      <rect x="16" y="116" width="160" height="14" rx="2" ry="2" class="skeleton-item" />

      <!-- 动画效果 -->
      <rect class="skeleton-animated" x="-300" y="0" width="100%" height="100%" opacity="0.2" />
    </svg>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

// 定义属性类型
const props = defineProps<{
  width?: string
  height?: string
}>()

// 默认属性值
const { width = '300px', height = '150px' } = props
</script>

<style scoped>
.skeleton-wrapper {
  display: inline-block;
  overflow: hidden;
}

.skeleton-item {
  fill: #e5e5e5;
}

.skeleton-animated {
  fill: #ffffff;
  animation: elementSkeleton 1.5s infinite linear;
}

@keyframes elementSkeleton {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(600px);
  }
}
</style>
